<route lang="json5" type="device">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '设备',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import aboutUs from '@/components/form/about-us.vue'
import accountMessage from '@/components/form/account-message.vue'
import brandMessage from '@/components/form/brand-message.vue'
import kefu from '@/components/form/kefu.vue'
import safePhone from '@/components/form/safe-phone.vue'
import serviceFeeDetail from '@/components/form/service-fee-detail.vue'
import serviceFee from '@/components/form/service-fee.vue'
import transferFee from '@/components/form/transfer-fee.vue'

import vCell from '@/components/v-cell.vue'
import { getNavBarHeight, handleClick } from '@/utils/index'

const accountMessageRef = ref() // 商户信息配置
const serviceFeeRef = ref() // 服务费充值
const serviceFeeDetailRef = ref() // 服务费明细
const transferFeeRef = ref() // 服务费转账
const brandMessageRef = ref()// 品牌信息配置
const kefuRef = ref() // 客服
const aboutUsRef = ref() // 关于我们

const toast = useToast()
const navBarHeight = getNavBarHeight()
const tag1 = [
  {
    title: '商品分类',
    icon: 'scan',
    url: '',
    bg: 'bg1',
    type: 'scan',
  },
  {
    title: '入库日志',
    icon: 'fork',
    url: '/pages/device/deviceList',
    bg: 'bg2',
  },
  {
    title: '销售日志',
    icon: 'copy',
    url: '',
    bg: 'bg3',
  },
]

const tag2 = [
  {
    title: '银行卡管理',
    icon: 'creditcard',
    url: '/pages-sub/mine/txAccount?tab=bank',
    bg: 'bg12',
  },
  {
    title: '微信管理',
    icon: 'usb',
    url: '/pages-sub/mine/txAccount?tab=wechat',
    bg: 'bg8',

  },
  {
    title: '支付宝管理',
    icon: 'bags',
    url: '/pages-sub/mine/txAccount?tab=alipay',
    bg: 'bg7',
  },
]
const safePhoneRef = ref()
const clearLog = ref(false)
const logOff = ref(false)
const productImg = ref(false)
const tag3 = [
  {
    title: '安全手机',
    desc: '改动短信验证',
    icon: 'creditcard',
    bg: 'bg12',
    handle: () => {
      safePhoneRef.value.show = true
    },
  },
  {
    title: '清除日志',
    desc: '初始日志及数据',
    icon: 'usb',
    bg: 'bg8',
    handle: () => {
      clearLog.value = true
    },
  },
  {
    title: '注销账户',
    desc: '删除账户及数据',
    icon: 'bags',
    bg: 'bg7',
    handle: () => {
      logOff.value = true
    },
  },
]
const tag4 = [
  {
    title: '官方客服',
    icon: 'creditcard',
    bg: 'bg12',
    handle: () => {
      kefuRef.value.show = true
    },
  },
  {
    title: '关于我们',
    icon: 'usb',
    bg: 'bg8',
    handle: () => {
      aboutUsRef.value.show = true
    },
  },
  {
    title: '产品图片',
    icon: 'bags',
    url: '',
    bg: 'bg7',
    handle: () => {
      productImg.value = true
    },
  },
  {
    title: '退出登录',
    icon: 'bags',
    url: '/pages/login/login',
    bg: 'bg7',
  },
]

function handleClose() {
  // accountMessageRef.value.close()
}
// 清除数据
function clearLogSubmit() {
  toast.show({
    msg: '数据清除操作成功',
    position: 'middle',
    iconName: 'success',
  })
  clearLog.value = false
}
// 注销账户
function logOffSubmit() {
  toast.show({
    msg: '账户注销操作成功',
    position: 'middle',
    iconName: 'success',
  })
  logOff.value = false
}
</script>

<template>
  <view class="top pt-safe" :style="{ paddingTop: `${navBarHeight}px` }">
    <view class="u-box">
      <view class="logo">
        <wd-img :width="60" :height="60" round src="https://wap.mch.yuntbq.com/static/img/logo.png" mode="scaleToFill" />
      </view>
      <view class="u-msg">
        <view class="flex-1">
          <view class="name">
            uid300
          </view>
          <view>电话：13800000000</view>
        </view>
        <wd-icon name="edit-outline" size="22px" @click="accountMessageRef.show = true" />
      </view>
    </view>
    <view class="top-tag">
      <wd-row>
        <wd-col :span="8">
          <view class="item">
            <!-- <wd-icon name="money-circle" size="25px" color="#3287e1" /> -->
            <view class="menu-title">
              服务费余额
            </view>
            <view class="num">
              ￥-536.68
            </view>
            <view class="i-link" @click="serviceFeeRef.show = true">
              点击充值
            </view>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="item">
            <!-- <wd-icon name="money-circle" size="25px" color="#3287e1" /> -->
            <view class="menu-title">
              已用服务费
            </view>
            <view class="num">
              ￥-536.68
            </view>
            <view class="i-link" @click="serviceFeeDetailRef.show = true">
              查看详情
            </view>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="item">
            <!-- <wd-icon name="money-circle" size="25px" color="#3287e1" /> -->
            <view class="menu-title">
              账户余额
            </view>
            <view class="num">
              ￥-536.68
            </view>
            <view class="i-link">
              查看详情
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>

  <view class="option-list">
    <view class="title">
      支付管理
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag1" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list">
    <view class="title">
      提现账号管理
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag2" :key="index" :span="8">
        <view class="item" @click="handleClick(item)">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list">
    <view class="title">
      其它操作
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag3" :key="index" :span="8">
        <view class="item" @click="handleClick(item)">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="cell-group">
    <vCell title="商户信息配置" icon="setting1" is-link @click="accountMessageRef.show = true">
      <template #value>
        <view class="i-link">
          密码/手机/会员开关
        </view>
      </template>
    </vCell>
    <vCell title="微信账号管理" icon="user" is-link to="/pages-sub/mine/wechatManage">
      <template #value>
        微信账号：<text class="i-link">
          5
        </text> 个
      </template>
    </vCell>
    <vCell title="微信登录授权" icon="dong" is-link to="/pages-sub/mine/loginAuth?type=1">
      <template #value>
        微信账号：<text class="i-link">
          5
        </text> 个
      </template>
    </vCell>
    <vCell title="经营报表通知" icon="chart" is-link to="/pages-sub/mine/loginAuth?type=2">
      <template #value>
        微信账号：<text class="i-link">
          5
        </text> 个
      </template>
    </vCell>
    <vCell title="设备状态通知" icon="fork" is-link to="/pages-sub/mine/loginAuth?type=3">
      <template #value>
        微信账号：<text class="i-link">
          5
        </text> 个
      </template>
    </vCell>
    <vCell title="支付投诉通知" icon="mail" is-link to="/pages-sub/mine/loginAuth?type=4">
      <template #value>
        微信账号：<text class="i-link">
          5
        </text> 个
      </template>
    </vCell>
    <vCell title="品牌服务配置" icon="service" is-link :border="false" @click="brandMessageRef.show = true" />
  </view>
  <view class="option-list">
    <wd-row>
      <wd-col v-for="(item, index) in tag4" :key="index" :span="6">
        <view class="item" @click="handleClick(item)">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <accountMessage ref="accountMessageRef" @close="handleClose" />
  <serviceFee ref="serviceFeeRef" @close="handleClose" @transfer-fee="transferFeeRef.show = true" />
  <serviceFeeDetail ref="serviceFeeDetailRef" @close="handleClose" />
  <transferFee ref="transferFeeRef" @close="handleClose" />
  <safePhone ref="safePhoneRef" @close="handleClose" />
  <brandMessage ref="brandMessageRef" @close="handleClose" />
  <kefu ref="kefuRef" @close="handleClose" />
  <aboutUs ref="aboutUsRef" @close="handleClose" />
  <wd-popup v-model="clearLog" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: auto;padding-bottom:60rpx;overflow: hidden;border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      商户【 清除数据 】
    </view>
    <view class="px-40rpx">
      <view class="mt-20rpx text-center">
        <wd-icon name="info-circle-filled" size="90rpx" color="#EE0A24" />
      </view>
      <view class="tips">
        <view>数据清除具有一定危险性，并且数据不可恢复，请慎重操作！</view>
        <view>为降低风险，只能清除今天之前的支付、投币、硬件统计等数据</view>
        <view>清除数据是将您在平台下的所有支付、投币、硬件统计等数据删除，平台将不会保留您的任何信息，以保证您隐私信息！</view>
        <view>再次声明：数据清除是不可逆向操作，平台无任何技术可以帮助您恢复数据，再不确认情况下谨慎操作！</view>
        <view class="py-10rpx text-#EE0A24">
          清除日志会导致部分数据显示和校正不正确, 如你执意清除又找客户追溯数据根源, 我们将停用你的清除功能!
        </view>
        <view class="text-#323233">
          如您确认要清除数据，请点击以下按钮！
        </view>
      </view>
      <view class="mx-auto mt-40rpx w-80%">
        <wd-button class="i-btn" type="success" size="small" custom-class="login-btn" block @click="clearLogSubmit">
          我确定要“清除数据”
        </wd-button>
      </view>
    </view>
  </wd-popup>
  <wd-popup v-model="logOff" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: auto;padding-bottom:60rpx;overflow: hidden;border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      商户【 账户注销 】
    </view>
    <view class="px-40rpx">
      <view class="mt-20rpx text-center">
        <wd-icon name="info-circle-filled" size="90rpx" color="#EE0A24" />
      </view>
      <view class="tips">
        <view>账户注销具有一定危险性，并且是不可逆向操作（数据不可恢复），请慎重操作！</view>
        <view>账户注销是将您在平台下的所有数据删除，并且把您的账户一并删除，平台将不会保留您的任何信息，以保证您隐私信息！</view>
        <view>再次声明：账户注销是不可逆向操作，平台无任何技术可以帮助您恢复数据，再不确认情况下谨慎操作！</view>
        <view>账户注销服务费：￥0 (以防恶意注册和注销)</view>
        <view class="py-10rpx text-#323233">
          如您确认要注销账户，请点击以下按钮！
        </view>
      </view>
      <view class="mx-auto mt-40rpx w-80%">
        <wd-button class="i-btn" type="success" size="small" custom-class="login-btn" block @click="logOffSubmit">
          我确定要“注销账户”
        </wd-button>
      </view>
    </view>
  </wd-popup>
  <wd-popup v-model="productImg" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: 70vh;padding-bottom:60rpx;overflow: hidden;border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      关于【 产品图片 】
    </view>
    <scroll-view scroll-y>
      <view class="pb-80rpx pt-40rpx text-center">
        <view><wd-img :width="250" :enable-preview="true" :height="300" src="https://wap.mch.yuntbq.com/static/images/ytbq_xc_1.jpg" /></view>
        <view><wd-img :width="250" :height="300" src="https://wap.mch.yuntbq.com/static/images/ytbq_xc_2.jpg" /></view>
        <view><wd-img :width="250" :height="300" src="https://wap.mch.yuntbq.com/static/images/ytbq_xc_3.jpg" /></view>
        <view><wd-img :width="250" :height="300" src="https://wap.mch.yuntbq.com/static/images/ytbq_xc_4.jpg" /></view>
        <view><wd-img :width="250" :height="300" src="https://wap.mch.yuntbq.com/static/images/ytbq_xc_5.jpg" /></view>
        <view><wd-img :width="250" :height="300" src="https://wap.mch.yuntbq.com/static/images/ytbq_xc_6.jpg" /></view>
      </view>
    </scroll-view>
  </wd-popup>
</template>

<style lang="scss" scoped>
    .top{
        padding-bottom: 20rpx;
        background: $uni-color-primary;
        color: #ffffff;
        .u-box{
          display: flex;
          align-items: center;
          padding: 0 30rpx;
        }
        .u-msg {
          padding: 0 20rpx;
          display: flex;
          flex:1;
          align-items: center;
          justify-content: space-between;
        }
        .top-tag {
          padding: 20rpx;
          text-align: center;
          background-color: #ffffff;
          margin: 20rpx;
          border-radius: 60px;
          color: #333;
          .item{
            margin-bottom: 0;
            :nth-child(2){
              border-left: 1px solid #eee;
              border-right: 1px solid #eee;
            }
            .num{
              color: #f9a134; // 橙色
            }
          }
        }
    }
    .pt60{
        padding-top: 60rpx;
    }
    .device-msg{
        padding: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #ffffff;
        margin: 20rpx;
        border-radius: 20rpx;
    }
    .box{
      padding: 0.625rem;
      background-color: #ffffff;
      margin: 0.625rem;
      border-radius: 0.625rem;
      color: $uni-color-success
    }
    .tips{
                padding: 20rpx;
                line-height: 40rpx;
                font-size: 24rpx;
                color: #ED6A0C;
            }
</style>
